<template>
<el-card>
     <el-card>
         <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="患者姓名">
            <el-input v-model="formInline.patientName" placeholder="请输入患者姓名"></el-input>
          </el-form-item>
          <el-form-item label="电话号码">
            <el-input v-model="formInline.patientPhone" placeholder="请输入患者联系电话"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="ToName">查询</el-button>
          </el-form-item>
        </el-form>
     </el-card>
    <el-card>
    <el-descriptions title="患者信息" direction="vertical" :column="3"  >
    <el-descriptions-item label="姓名"  >
      <span v-text="parent.patientName"></span>
      </el-descriptions-item>
    <el-descriptions-item label="手机号" >
      <span  v-text="parent.patientPhone"></span>
    </el-descriptions-item>
    <el-descriptions-item label="身份证号"  :span="2">
      <span  v-text="parent.cardId"></span>
    </el-descriptions-item>
    <el-descriptions-item label="诊断结果">
    <el-tag size="small">  <span  v-text="parent.diagnosis"></span></el-tag>
  </el-descriptions-item>
    <el-descriptions-item label="患者年龄"> <span  v-text="parent.age"></span></el-descriptions-item>
</el-descriptions>
</el-card>
<el-card>
  <el-table
    :data="outpatientlist"
    style="width: 100%">
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="center" inline class="demo-table-expand">
          <el-form-item label="门诊id">
            <span>{{ props.row.outpatientId }}</span>
          </el-form-item>
          <el-form-item label="门诊名称">
            <span>{{ props.row.outpatientName }}</span>
          </el-form-item>
          <el-form-item label="门诊价格">
            <span>{{ props.row.outpatientPrice }}</span>
          </el-form-item>
          <el-form-item label="门诊描述">
            <span>{{ props.row.outpatientDescribe }}</span>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column
      label="门诊id"
      prop="outpatientId">
    </el-table-column>
    <el-table-column
      label="门诊名称"
      prop="outpatientName">
    </el-table-column>
    <el-table-column
      label="价格（单位：元）"
      prop="outpatientPrice">
    </el-table-column>
  </el-table>
   <el-row>
        <el-col span="12"><h2>项目数量</h2></el-col> 
        <el-col span="12"><h2>总价（单位：元）</h2></el-col> 
    </el-row> 
     <el-row>
        <el-col span="12"><p ><span v-text="outpatientCount.letter"></span>件</p></el-col> 
        <el-col span="12"><p ><span v-text="outpatientCount.unit"></span>元</p></el-col> 
    </el-row>       
  </el-card>  
  </el-card>
</template>

<style>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>

<script>
  export default {
    data() {
      return {
        labelPosition: 'right',
        formLabelAlign: {
          name: '',
          region: '',
          type: ''
        },
        formInline:{
          patientName:"",
          patientPhone:"",
         
        },
        parent:{
           patientId:"",
          patientName:"",
          patientPhone:"",
          cardId:'',
          
        },
        outpatientlist:[],
        outpatientCount:{
          letter:0,
          unit:0,
        }
      }
    },
    methods: {
      ToName(){
        if(this.formInline.patientName==""){
             this.$message.error('患者姓名不能为空');
             return;
        }
         if(this.formInline.patientPhone==""){
             this.$message.error('电话号码都不能为空');
             return;
        }
         this.$axios.post("/api/biz/drugCharge/toName",this.formInline).then((res)=>{ 
             if(res.data.code==0){
               if(!res.data.data){
                  this.$message.error('该患者不存在');
                  return
               }
                 this.parent=res.data.data;
                 this.parent.trugType=1;
                 this.yaoping();
                  this.$message({
                    message: '查询成功',
                    type: 'success'
                  });
             }  
         }).catch(function (errorr){
            this.$message.error('有问题请联系开发人员'+errorr);
         })
      },
      yaoping(){
         this.$axios.post("/api/biz/outpatient/list",this.parent).then((res)=>{ 
           this.outpatientCount.unit=0
             if(res.data.code==0){
                 this.outpatientlist=res.data.data;
                 this.outpatientCount.letter=this.outpatientlist.length;
                 for(var i=0;i<this.outpatientlist.length;i++){
                     this.outpatientCount.unit+=this.outpatientlist[i].outpatientPrice
                 }
                
             }else{
                 console.log("获取患者列表错误"+res.data.code)
             }    
         })
      }
    },
  }
</script>